import { observer } from "mobx-react";
import DropSelect from '../common/drop-select';
import Divider from '../common/divider';
import { Button } from 'antd';
import { WeaColorPicker,WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class TemplateViewTop extends React.Component {
    render() {
        return (
            <div className="edc-workbook-tools">
                <div className="tool-area">
                    <div className="tool-area-row">
                        <DropSelect
                            style={{ width: 140 }}
                            value={fontFamily}
                            onChange={this.changeFontFamily}
                            options={fontFamilyOptions.map(d => ({ id: d, showname: d }))}
                            valueToStyleName="fontFamily"
                        />
                        <DropSelect
                            style={{ width: 40 }}
                            bf="0px"
                            value={fontSize}
                            onChange={this.changeFontSize}
                            options={fontSizeOptions}
                        />
                        <Button className="tool-btn"><i className="icon-mode-font-size-up" /></Button>
                        <Button className="tool-btn"><i style={{ fontSize: 12 }} className="icon-mode-font-size-down" /></Button>
                    </div>
                    <div className="tool-area-row">
                        <Button onClick={this.changeBold} className={`tool-btn${bold ? ' tool-btn-active' : ''}`}><i className="icon-coms-Bold" /></Button>
                        <Button onClick={this.changeItalic} className={`tool-btn${italic ? ' tool-btn-active' : ''}`}><i className="icon-coms-Italic" /></Button>
                        <Button onClick={this.changeUnderline} className={`tool-btn${underline ? ' tool-btn-active' : ''}`}><i className="icon-coms-Underline" /></Button>
                        <Divider type="vertical" style={{ height: 16 }} />
                        <DropSelect
                            onChange={this.changeBorder}
                            options={lineArr}
                            dropWidth={100}
                            inputCom={<Button onClick={this.changeBorder.bind(this, this.state.border)} className="tool-btn mr-5"><i className={this.getBorder(border)} /></Button>}
                        />
                        <Divider type="vertical" style={{ height: 16 }} />
                        <DropSelect
                            dropWidth={100}
                            inputCom={<Button
                                onClick={this.changeBackColor.bind(this, backColor)}
                                style={{ paddingBottom: 0, borderBottom: `5px solid ${backColor}`, fontSize: 12 }}
                                className="tool-btn"><i className="icon-mode-backcolor" /></Button>}
                            dropCom={<WeaColorPicker
                                customized={true}
                                onChange={this.changeBackColor}
                            >
                                <div className="toggle-icon-button mf-5">
                                    <i className="icon-coms-down2" />
                                </div>
                            </WeaColorPicker>}
                        />
                        <DropSelect
                            onChange={this.changeBorder}
                            options={lineArr}
                            dropWidth={100}
                            inputCom={<Button
                                onClick={this.changeForeColor.bind(this, foreColor)}
                                style={{ paddingBottom: 0, borderBottom: `5px solid ${foreColor}`, fontSize: 12 }}
                                className="tool-btn"><i className="icon-coms-text" /></Button>}
                            dropCom={<WeaColorPicker
                                customized={true}
                                onChange={this.changeForeColor}
                            >
                                <div className="toggle-icon-button mf-5">
                                    <i className="icon-coms-down2" />
                                </div>
                            </WeaColorPicker>}
                        />
                    </div>
                    <div className="tool-area-row" style={{ textAlign: 'center' }}>{getLabel('16189','字体') }</div>
                </div>
                <Divider type="vertical" />
                <div className="tool-area">
                    <div className="tool-area-row">
                        <Button onClick={this.changeVAlign.bind(this, GC.Spread.Sheets.VerticalAlign.top)} className={`tool-btn${vAlign === GC.Spread.Sheets.VerticalAlign.top ? ' tool-btn-active' : ''}`} style={{ paddingBottom: 10, paddingTop: 0 }}><i className="icon-mode-align-middle" /></Button>
                        <Button onClick={this.changeVAlign.bind(this, GC.Spread.Sheets.VerticalAlign.center)} className={`tool-btn${vAlign === GC.Spread.Sheets.VerticalAlign.center ? ' tool-btn-active' : ''}`}><i className="icon-mode-align-middle" /></Button>
                        <Button onClick={this.changeVAlign.bind(this, GC.Spread.Sheets.VerticalAlign.bottom)} className={`tool-btn${vAlign === GC.Spread.Sheets.VerticalAlign.bottom ? ' tool-btn-active' : ''}`} style={{ paddingBottom: 0, paddingTop: 10 }}><i className="icon-mode-align-middle" /></Button>
                        <Divider type="vertical" style={{ height: 16 }} />
                        <Button
                            onClick={this.changeWorkWrap}
                            className={`tool-btn${wordwrap ? ' tool-btn-active' : ''}`}
                        >
                            <i className="icon-mode-wordwrap" />
                        </Button>
                    </div>
                    <div className="tool-area-row">
                        <Button onClick={this.changeHAlign.bind(this, GC.Spread.Sheets.HorizontalAlign.left)} className={`tool-btn${hAlign === GC.Spread.Sheets.HorizontalAlign.left ? ' tool-btn-active' : ''}`} ><i className="icon-mode-align-left" /></Button>
                        <Button onClick={this.changeHAlign.bind(this, GC.Spread.Sheets.HorizontalAlign.center)} className={`tool-btn${hAlign === GC.Spread.Sheets.HorizontalAlign.center ? ' tool-btn-active' : ''}`}><i className="icon-mode-align-center" /></Button>
                        <Button onClick={this.changeHAlign.bind(this, GC.Spread.Sheets.HorizontalAlign.right)} className={`tool-btn${hAlign === GC.Spread.Sheets.HorizontalAlign.right ? ' tool-btn-active' : ''}`} ><i className="icon-mode-align-right" /></Button>
                        <Divider type="vertical" style={{ height: 16 }} />
                        <Button
                            onClick={this.changeSpanCell}
                            className={`tool-btn${spanCell ? ' tool-btn-active' : ''}`}
                        >
                            <i className="icon-mode-combine-cell" />
                        </Button>
                    </div>
                    <div className="tool-area-row" style={{ textAlign: 'center' }}>{getLabel(502331,'对齐方式')}</div>
                </div>
            </div>
        )
    }
}